<template>
  <div class="screen" ref="rectDom" :style="screenStyle" @click="canvasClick">
    <slot :key="config.canvasConfig.width + config.canvasConfig.height"></slot>
  </div>
</template>
<script lang="ts">
import { ref, Ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { computed, defineComponent } from "vue";
import { useConfig } from "@/stores/datav/useConfig";

export default defineComponent({
  emits: ["area", "click"],
  setup(props, ctx) {
    const rectDom: Ref<HTMLDivElement | null> = ref<HTMLDivElement | null>(
      null
    );
    const config = useConfig();
    const screenStyle = computed(() => {
      return {
        width: config.canvasConfig.width + "px",
        height: config.canvasConfig.height + "px",
        background: `${config.canvasConfig.backgroundColor} url('${config.canvasConfig.backgroundImage}')`,
        transform: `scale(${config.canvasConfig.scale},${config.canvasConfig.scale})`,
      };
    });

    let t = 0;
    let offsetY = 0;
    let offsetX = 0;
    const selectBox: HTMLDivElement = document.createElement("div");
    selectBox.classList.add("ac_select_box");
    selectBox.style.top = "-10px";
    selectBox.style.left = "-10px";

    function mouseDown(e: MouseEvent) {
      e.stopPropagation();
      e.preventDefault();
      if (t) {
        clearTimeout(t);
        t = 0;
      }
      if (e.target !== rectDom.value) {
        return;
      }
      t = setTimeout(() => {
        t = 0;
        offsetY = e.offsetY;
        offsetX = e.offsetX;
        selectBox.style.top = e.offsetY + "px";
        selectBox.style.left = e.offsetX + "px";
        selectBox.style.width = "0px";
        selectBox.style.height = "0px";

        (rectDom.value as HTMLDivElement).addEventListener(
          "mousemove",
          mouseMove
        );
        window.addEventListener("mouseup", mouseUp);
      }, 100);
    }

    function mouseMove(e: MouseEvent) {
      // e.stopPropagation();
      const y = e.offsetY - offsetY;
      const x = e.offsetX - offsetX;
      if (y < 0 || x < 0) {
        return;
        // console.log(x, y, offsetX, offsetY);
        // selectBox.style.width = Math.abs(x) + 'px';
        // selectBox.style.height = Math.abs(y) + 'px';
        // selectBox.style.left = offsetX + x + 'px'
        // selectBox.style.top = offsetY + y + 'px'
      } else {
        selectBox.style.width = e.offsetX - offsetX + "px";
        selectBox.style.height = e.offsetY - offsetY + "px";
      }
    }

    function mouseUp(e: MouseEvent) {
      e.stopPropagation();
      (rectDom.value as HTMLDivElement).removeEventListener(
        "mousemove",
        mouseMove
      );
      window.removeEventListener("mouseup", mouseUp);
      ctx.emit("area", {
        startLeft: selectBox.offsetLeft,
        startTop: selectBox.offsetTop,
        endLeft: selectBox.offsetLeft + selectBox.clientWidth,
        endTop: selectBox.offsetTop + selectBox.clientHeight,
      });

      selectBox.style.left = "-10px";
      selectBox.style.top = "-10px";
      selectBox.style.width = "0";
      selectBox.style.height = "0";
    }

    onMounted(() => {
      (rectDom.value as HTMLDivElement).appendChild(selectBox);
      (rectDom.value as HTMLDivElement).addEventListener(
        "mousedown",
        mouseDown
      );
      (rectDom.value as HTMLDivElement).addEventListener(
        "mouseup",
        (e: MouseEvent) => {
          if (t) {
            clearTimeout(t);
            t = 0;
            ctx.emit("click", e);
          }
        }
      );
    });

    return {
      config,
      rectDom,
      screenStyle,
    };
  },
});
</script>
<style lang="less" scoped>
.screen {
  transform-origin: 0 0;
  box-shadow: 0 5px 5px #151719;
  position: relative;
  background-size: 100% 100% !important;
  position: relative;
  /deep/ .ac_select_box {
    border: 1px dashed @primary-color;
    background: fade(@primary-color, 20%);
    position: absolute;
    pointer-events: none;
    z-index: 9999;
  }
}
</style>
